﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人日计划管理</title>
    <jsp:include page="/resources/inc/head.jsp" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet"
          media='print'/>

</head>
<body>
<div id="main">
    <div class="row">
        <div class="col-md-12">
            <div style="margin: 10px;text-align:right; ">
                <div class="btn btn-default" type="button" title="切换视图" onclick="changeView()">切换视图</div>
                <div class="btn btn-default" type="button" title="导入计划" onclick="importPlan()">导入计划</div>
                <div class="btn btn-default" type="button" title="导出计划" onclick="exportPlan()">导出计划</div>
            </div>
            <div id="calendar"></div>
        </div>
    </div>
</div>
<jsp:include page="/resources/inc/footer.jsp" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/locale/zh-cn.js"></script>
<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>--%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script>
    var fullCalendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay,listMonth,listYear'
        },
        views: {
            month: {buttonText: '月视图'},
            basicWeek: {buttonText: '周视图'},
            basicDay: {buttonText: '日视图'},
            listMonth: {buttonText: '月列表'},
            listYear: {buttonText: '年列表'}
        },
        eventLimit: true,//是否设置最大事件
        eventLimitClick: "popover",//最大事件点击格式
        contentHeight: 500,//高度
        firstDay: 7,//设置每周第一天
        locale: 'zh-cn',//语言
        fixedWeekCount: false,//显示实际周数
        weekNumbers: true,//表格左侧显示周数
        displayEventTime: false,//是否显示时间
        timezone: 'local',
        events: {
            url: '${basePath}/oa/wc/personalDayPlan/getPageData',
            ignoreTimezone: true
        },
        eventClick: function (event, element, view) {
            var planId = event.planId;
            Common.openPage({
                title: '修改更人日计划',
                url: '${basePath}/oa/wc/personalDayPlan/update',
                param: Common.getParam({id: planId})
            });
//                $('#calendar').fullCalendar('updateEvent', event);
        },//点击日程事件
        dayClick: function (date, allDay, jsEvent, view) {
            Common.openPage({
                title: '新增更人日计划',
                url: '${basePath}/oa/wc/personalDayPlan/create',
                param: Common.getParam({time: date._i})
            });
        },//点击天
        eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
            var planId = event.planId;
            var start = event.start.format();
            var data = {id: planId, planDate: new Date(start)};
            $.ajax({
                url: '${basePath}/oa/wc/personalDayPlan/update',
                type: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data),
                success: function (res) {
                    layer.msg("操作成功！", {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }, error: function (res) {
                    layer.msg("操作失败！", {
                        icon: 5,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    });
                    revertFunc();
                }
            })
        },//拖动事件
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        //listDayFormat: false
    });
    function refresh() {
        fullCalendar.fullCalendar('refetchEvents');
    }
    function changeView() {
        window.location.href = "${basePath}/oa/wc/personalDayPlan/index";
    }
    function exportPlan() {
        window.location.href = "${basePath}/oa/wc/personalDayPlan/export";
    }
    function importPlan() {
        Common.openPage({
            title: "导入日计划",//page标题
            url: "${basePath}/oa/wc/personalDayPlan/import",
            isFull: false,//是否全屏
            isMaxMin: false,//是否支持最大最小化
            width: "500px",//初始宽度
            length: "35%"//初始高度
        });
    }
</script>
</body>
</html>